<script setup>
    import {ref} from 'vue'

    import { ElMessage } from 'element-plus';
    const radio1 = ref(1)
    const {detail,serviceArr} = defineProps({
        detail: {
            serviceIds: [],
            productLadderList: [],
            productFullReductionList: []
        },
        serviceArr: Array
    })


    const ladderDel = (index) => {
        detail.productLadderList.splice(index,1)
    }

    const ladderAdd = () => {
        if(detail.productLadderList.length >= 3){
            ElMessage.warning('最多只能添加三条');
            return
        }
        detail.productLadderList.push({
            count: 0,
            discount: 0,
            price: 0
        })
    }

    const fullDel = (index) => {
        detail.productFullReductionList.splice(index,1)
    }

    const fullAdd = () => {
        if(detail.productFullReductionList.length >= 3){
            ElMessage.warning('最多只能添加三条');
            return
        }
        detail.productFullReductionList.push({
            fullPrice: 0,
            reducePrice: 0
        })
    }
</script>

<template>
    <div>
        <el-form>
            <el-form-item label="&emsp;&emsp;赠送积分：">
                <el-input type="text" v-model="detail.giftPoint" />
            </el-form-item>
            <el-form-item label="&emsp;赠送成长值：">
                <el-input type="text" v-model="detail.giftGrowth" />
            </el-form-item>
            <el-form-item label="积分购买限制：">
                <el-input type="text" v-model="detail.lowStock" />
            </el-form-item>
            <el-form-item label="&emsp;&emsp;预告商品：">
                <el-switch v-model="detail.previewStatus" />
            </el-form-item>
            <el-form-item label="&emsp;&emsp;商品上架：">
                <el-switch v-model="detail.publishStatus" />
            </el-form-item>
            <el-form-item label="&emsp;&emsp;商品推荐：">
                新品 <el-switch v-model="detail.newStatus" />
                推荐    <el-switch v-model="detail.promotionType" />
            </el-form-item>
            <el-form-item label="&emsp;&emsp;服务保证：">
                <!-- serviceIds -->
                <el-checkbox-group v-model="detail.serviceIds">
                    <el-checkbox v-for="item in serviceArr" :label="item.id" :key="item.id" >
                        {{ item.name }}
                    </el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="&emsp;详情页标题：">
                <el-input type="text" v-model="detail.detailTitle" />
            </el-form-item>
            <el-form-item label="&emsp;详细页描述：">
                <el-input type="text" v-model="detail.detailDesc" />
            </el-form-item>
            <el-form-item label="&emsp;商品关键字：">
                <el-input type="text" v-model="detail.keywords" />
            </el-form-item>
            <el-form-item label="&emsp;&emsp;商品备注：">
                <el-input type="text" v-model="detail.note" />
            </el-form-item>
            <el-form-item label="选择优惠方式：">
                <el-radio-group v-model="radio1">
                    <el-radio-button :label="0" >
                        无优惠
                    </el-radio-button>
                    <el-radio-button :label="1" >
                        特惠促销
                    </el-radio-button>
                    <el-radio-button :label="2" >
                        会员价格
                    </el-radio-button>
                    <el-radio-button :label="3" >
                        阶梯价格
                    </el-radio-button>
                    <el-radio-button :label="4" >
                        满减价格
                    </el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item
                label="&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;"
            >
                <div v-if="radio1 == 1">
                    <!-- 特惠促销 -->
                    <el-row>
                        <el-col :span="6">
                            开始时间:
                        </el-col>
                        <el-col :span="18">
                            <el-date-picker
                                v-model="detail.promotionStartTime"
                                type="datetime"
                                placeholder="选择开始时间"
                            />
                        </el-col>
                    </el-row>
                    <el-row style="margin-top: 15px;">
                        <el-col :span="6">
                            结束时间:
                        </el-col>
                        <el-col :span="18">
                            <el-date-picker
                                v-model="detail.promotionEndTime"
                                type="datetime"
                                placeholder="选择结束时间"
                            />
                        </el-col>
                    </el-row>
                    <el-row style="margin-top: 15px;">
                        <el-col :span="6">
                            促销价格:
                        </el-col>
                        <el-col :span="18">
                            <el-input
                                v-model="detail.promotionPrice"
                                type="text"
                                placeholder="填写促销价格"
                            />
                        </el-col>
                    </el-row>
                </div>
                <div v-if="radio1 == 2">
                    <!-- 会员价格 -->
                    <el-row 
                        v-for="item in detail.memberPriceList" :key="item.memberLevelId"
                    style="margin-top: 15px;">
                        <el-col :span="6">
                            {{ item.memberLevelName }}:
                        </el-col>
                        <el-col :span="18">
                            <el-input
                                v-model="item.memberPrice"
                                type="text"
                                placeholder="填写促销价格"
                            />
                        </el-col>
                    </el-row>
                </div>
                <div v-if="radio1 == 3">
                    <!-- 阶梯价格 -->
                    <!-- detail.productLadderList -->
                    <el-table :data="detail.productLadderList" style="width: 100%" border>
                        <!-- <el-table-column type="selection" width="55" align="center" />
                        <el-table-column label="编号" prop="id" width="80" align="center" /> -->
                        <el-table-column label="数量" width="120" align="center">
                            <template #default="scope">
                                <el-input v-model="scope.row.count"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="折扣" width="120" align="center">
                            <template #default="scope">
                                <el-input v-model="scope.row.discount"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="180" align="center">
                            <template #default="scope">
                                <!-- scope.$index  相当于 当前循环数组的下标 -->
                                <el-button type="text" 
                                
                                    @click="ladderDel(scope.$index)"
                                >
                                    删除
                                </el-button>
                                <el-button type="text" @click="ladderAdd()">
                                    增加
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div v-if="radio1 == 4">
                    <!-- 满减价格 -->
                    <el-table :data="detail.productFullReductionList" style="width: 100%" border>
                        <!-- <el-table-column type="selection" width="55" align="center" />
                        <el-table-column label="编号" prop="id" width="80" align="center" /> -->
                        <el-table-column label="满" width="120" align="center">
                            <template #default="scope">
                                <el-input v-model="scope.row.fullPrice"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="减" width="120" align="center">
                            <template #default="scope">
                                <el-input v-model="scope.row.reducePrice"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="180" align="center">
                            <template #default="scope">
                                <!-- scope.$index  相当于 当前循环数组的下标 -->
                                <el-button type="text" 
                                
                                    @click="fullDel(scope.$index)"
                                >
                                    删除
                                </el-button>
                                <el-button type="text" @click="fullAdd()">
                                    添加
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>